﻿@using TomNet.IMSC.Model.DbModels.Common
@{
    Layout = null;
    var cid = Request.QueryString["cid"] != null ? Request.QueryString["cid"].ToString() : "-1";
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        .help-block {
            margin-top: 0px !important;
        }
    </style>
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=042aacf4c33c2fb0950701aee1c562de"></script>
    <title>Insert   </title>
</head>
<body>


    <div class="wrapper wrapper-content animated fadeInRight">
        <form class="form-horizontal m-t" id="mainForm">
            <div class="row">
                <input id="DecorationCompanyID" name="DecorationCompanyID" value=@cid type="text" style="display:none" class="form-control">

                <div class="col-sm-6">
                    <div class="form-group">
                        <div>
                            <label class="col-xs-3 control-label">门店：</label>
                            <div class="col-xs-9">
                                <input id="Name" name="Name" type="text" class="form-control">
                            </div>
                        </div>
                        <div style="height:65px"></div>
                        <div>
                            <label class="col-xs-3 control-label">地址：</label>
                            <div class="col-xs-9">
                                <input id="Address" name="Address" type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-3 control-label">地区：</label>
                        <div class="col-xs-9">
                            <select class="form-control" id="ProvinceID" name="ProvinceID">
                                <option value="">请选择省份</option>
                            </select>
                            <select class="form-control" id="CityID" name="CityID">
                                <option value="">请选择城市</option>
                            </select>
                            <select class="form-control" id="AreaID" name="AreaID">
                                <option value="">请选择区县</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-11">
                    <div class="form-group">
                        <label class="col-xs-3 control-label">输入搜索地点：</label>
                        <div class="input-group">
                            <input type="text" id="suggestId" value="" class="form-control"> <span class="input-group-btn">
                                <button type="button" onclick="Sereachmap()" value="搜索" class="btn btn-primary">
                                    搜索
                                </button>
                            </span>
                        </div>
                    </div>
                    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                </div>
            </div>
            <input type="hidden" id="X" name="X" value="0" />
            <input type="hidden" id="Y" name="Y" value="0" />
            <div class="row">
                <div id="allmap" style="width:790px;height:420px;"></div>

            </div>
            <div class="row">
                <div class="col-sm-6">

                </div>
                <div class="col-sm-6">
                    <div class="pull-right">
                        <button id="submit" class="btn btn-primary pull-center" type="submit">
                            <i class="fa fa-check"></i>&nbsp;提&nbsp;交
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
<script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>

<!-- jQuery Validation plugin javascript-->
<script type="text/javascript" src="~/Scripts/plugins/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/validate/messages_zh.min.js"></script>
<script type="text/javascript" src="~/Scripts/Extensions/ExtValidator.js"></script>

<!-- layer javascript -->
<script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>
<script type="text/javascript">

    GetProvince();//加载省份
    $("#ProvinceID").change(function () { GetCity() });//加载城市
    $("#CityID").change(function () { GetDistrict() });//加载区县

    // 百度地图API功能

    var map = new BMap.Map("allmap");
    map.centerAndZoom("沈阳", 12);      // 用城市名设置地图中心点
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setDefaultCursor("url('bird.cur')");   //设置地图默认的鼠标指针样式

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    map.addEventListener("click", function (e) {
        $("#X").val(e.point.lng);
        $("#Y").val(e.point.lat);
        map.clearOverlays();//清除之前选中的标注
        var point = new BMap.Point(e.point.lng, e.point.lat);
        var marker = new BMap.Marker(point);// 创建标注
        map.addOverlay(marker);             // 将标注添加到地图中
        marker.disableDragging();           // 不可拖拽
    });

    //搜索按钮点击事件地图模糊查询
    function Sereachmap() {
        var local = new BMap.LocalSearch(map, {
            renderOptions: { map: map }
        });
        local.search($("#suggestId").val());
    }
    //-------------------------------------------地图关键字提示输入点击搜索-------------------------------------------
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
		{
		    "input": "suggestId"
		, "location": map
		});

    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        $("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        $("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    function setPlace() {
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun() {
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            $("#X").val(pp.lng);
            $("#Y").val(pp.lat);
            map.centerAndZoom(pp, 14);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
    //-------------------------------------------地图关键字提示输入点击搜索---结束-------------------------------------------


    $(function () {
        var icon = "<i class='fa fa-times-circle'></i> ";
        var validator = $("#mainForm").validate({
            rules: {
                Name: {
                    required: true,
                    maxlength: 50
                }, Address: {
                    required: true,
                    maxlength: 255
                }, ShowIndex: {
                    required: true,
                    digits: true,
                    maxlength: 2,
                    number: true
                }, State: {
                    required: true,
                    digits: true,
                    maxlength: 2,
                    number: true
                }, X: {
                    required: true
                }
            },
            messages: {
                Name: {
                    required: icon + "请输入门店",
                    maxlength: icon + "门店名称过长"
                }
                , Address: {
                    required: icon + "请输入门店地址",
                    maxlength: icon + "门店地址过长"
                }, ShowIndex: {
                    required: icon + "请输入排序号",
                    maxlength: icon + "位数过长"
                }, State: {
                    required: icon + "请输入状态",
                    maxlength: icon + "位数过长"
                }, X: {
                    required: icon + "请在地图上选点"
                }
            },
            submitHandler: function (form) {
                if ($("#X").val() == 0 && $("#Y").val() == 0) {
                    layer.msg("未选取地图坐标", { icon: 5, time: 2000 });
                    return;
                }
                //进行ajax传值
                $.ajax({
                    url: "/Decoration/DecorationCompanyStore/InsertAsync",
                    type: "post",
                    dataType: "json",
                    data: $('#mainForm').serialize(),
                    success: function (data) {
                        //Info,Success,Warning,Error
                        var type = data.type;
                        if (type == 1) {
                            layer.msg(data.content, { icon: 6, time: 2000 },
                                function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                });

                        } else {
                            layer.msg(data.content, { icon: 5, time: 2000 });
                        }
                    }
                });
            }
        });

    });

    function GetProvince() {
        $("#ProvinceID").empty();//清空省份SELECT控件
        $.getJSON("/DecorationCompanyStore/GetProvincelist", function (data) {
            $.each(data, function (i, item) {
                $("<option></option>").val(item["id"]).text(item["name"]).appendTo($("#ProvinceID"));
            })
            GetCity();
        });
    }

    function GetCity() {
        $("#CityID").empty();//清空城市SELECT控件
        $.getJSON(
        "/DecorationCompanyStore/GetCitylist",
        { pid: $("#ProvinceID").val() },
        function (data) {
            $.each(data, function (i, item) {
                $("<option></option>").val(item["id"]).text(item["name"]).appendTo($("#CityID"));
            })
            GetDistrict();
        });
    }
    function GetDistrict() {
        $("#AreaID").empty();//清空区县SELECT控件
        $.getJSON(
            "/DecorationCompanyStore/GetDistrictlist",
            {
                cid: $("#CityID").val()
            },
            function (data) {
                $.each(data, function (i, item) {
                    $("<option></option>").val(item["id"]).text(item["name"]).appendTo($("#AreaID"));
                })
            });
    }
</script>
